import React, { Component } from 'react';
import $ from 'jquery';
import {HashRouter as Router,Route,Link} from 'react-router-dom';
import "../styles/tablestar.css";
import Jintian from './tblist/jintian';
import Mingtian from './tblist/mingtian';
import Toweek from './tblist/toweek';
import Tomonth from './tblist/tomonth';
import Toyear from './tblist/toyear';
const RouteTab = (route) => (
  <Route path={route.path} render={props => (
    // 把自路由向下传递来达到嵌套。
    <route.component {...props} routes={route.routes}/>
  )}/>
)

class TableStar extends Component{
	 render(){
	 	var routes = this.props.routes;
	 	console.log(routes);
    	return (
    		<div className="tablestart">
    			<div className="TalistHead">星座运势</div>
    			<div className="seltime">
    				 <Link to="/tablestar/jintian" className="typetime">
              	今天
             </Link>
             <Link to="/tablestar/mingtian" className="typetime">
              	明天
             </Link>
             <Link to="/tablestar/toweek" className="typetime">
              	本周
             </Link>
             <Link to="/tablestar/tomonth" className="typetime">
              	本月
             </Link>
             <Link to="/tablestar/toyear" className="typetime">
              	今年
             </Link>
    			</div>
    			<div className="rsinfo">
    				{routes.map((route, i) => (
		          <RouteTab key={i} {...route}/>
		        ))}
    			</div>
    			
    		</div>
   		);  
    }
	 componentDidMount(){
		$(".seltime a").eq(0).addClass("clactives");
		$(".seltime").on("click","a",function(){
			$(this).addClass("clactives").siblings().removeClass("clactives");
		})
	}
}
export default TableStar;